<template>
  <div style="padding: 0 10px; display: flex; align-items: center;" @click="toggleClick">
    <i class="hamburger el-icon-s-unfold" :style="{color: sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor}" :class="{ 'is-active': isActive }" style="font-size: 26px;"></i>
  </div>
</template>

<script>
import variables from "@/assets/styles/variables.scss";
export default {
  name: "Hamburger",
  props: {
    isActive: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    sideTheme() {
      return this.$store.state.settings.sideTheme;
    },
    variables() {
      return variables;
    }
  },
  methods: {
    toggleClick() {
      this.$emit("toggleClick");
    },
  },
};
</script>

<style scoped>
.hamburger {
  transition: 0.3s;
}
.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
